<template>
  <div class="stage-view">
    <div class="staget-list-wrap">
      <stage-list
        v-for="(stage, index) in stageList"
        :key="stage.settingId"
        :index="index"
        :height="listHeight"
        :width="listWidth"
        :flow-item="flowItem"
        :stage="stage"
        :base-params="baseParams"
        @enter-detail="enterDetail"
      />
    </div>
  </div>
</template>

<script>
import StageList from './StageList'

export default {
  name: 'StageView',
  components: {
    StageList
  },
  props: {
    baseParams: {
      type: Object,
      required: true
    },
    flowItem: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      stageList: [],
      listWidth: 230,
      listHeight: 200
    }
  },
  mounted() {
    window.onresize = () => {
      this.updateListWidth()
      this.updateListHeight()
    }

    this.updateListHeight()
    this.getStageList()
  },
  methods: {
    /**
     * @description: 进入详情
     * @return {*}
     */
    enterDetail() {
      this.$emit('enter-detail', ...arguments)
    },

    /**
     * @description: 获取商机组阶段
     * @return {*}
     */
    getStageList() {
      // 1赢单2输单3无效
      const stageList = this.flowItem.settingList.map(o => {
        return { ...o, isEnd: false, count: 0, sum: 0 }
      })
      // 结束阶段传  endId 值
      stageList.push({ settingId: '1', settingName: '赢单', endId: '1', isEnd: true, count: 0, sum: 0 })
      stageList.push({ settingId: '2', settingName: '输单', endId: '2', isEnd: true, count: 0, sum: 0 })
      stageList.push({ settingId: '3', settingName: '无效', endId: '3', isEnd: true, count: 0, sum: 0 })

      this.stageList = stageList

      this.updateListWidth()
    },

    /**
     * @description: 更新列宽
     * @return {*}
     */
    updateListWidth() {
      const averageWidth = this.$el.getBoundingClientRect().width / this.stageList.length
      // 列宽
      this.listWidth = averageWidth < 230 ? 230 : averageWidth
    },

    /**
     * @description: 更新列高
     * @return {*}
     */
    updateListHeight() {
      this.$nextTick(() => {
        const clientHeight = document.documentElement.clientHeight
        this.listHeight = clientHeight - 260
      })
    }
  }
}
</script>

<style scoped lang="scss">
.stage-view {
  width: 100%;
  overflow-x: auto;
  border: 1px solid $--border-color-base;

  .staget-list-wrap {
    white-space: nowrap;
  }

  .empty-text {
    margin-top: 75px;
    color: $--color-n200;
    text-align: center;
  }
}
</style>
